import { Avatar, List,Button } from 'antd';
import React  from 'react'
import './table.css'
//引入请求
import $http from '../../Utils/request';
//引入内容
import storage from '../../Utils/storage'

//创建请求头文件
let config = {}
if(storage.get("token") !== null){
  config = {
    headers:
      {'Content-Type': 'application/json',
        'token':storage.get("token").data
      }
  }
}else{
  config = {
    headers:
      {'Content-Type': 'application/json'
      }
  }
}

class ProductinfoTable extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      isData : []
    }
  }

  //创建钩子函数
componentDidMount () {
  $http.post(
    "http://localhost/mall-basic-service/basic/productinfo/queryProductInfos"
    , null
    ,config
  ).then((response)=>{
    this.setState({
      isData: response.data.data
    })
  })
}

  render () {
    return (
      <div className={'bodyDiv'}>
        <List
          itemLayout="vertical"
          size="large"
          header={"商品列表"}
          pagination={{
            onChange: (page) => {
              console.log(page);
            },

          }}
          dataSource={this.state.isData}
          bordered = {true}
          split = {true}
          renderItem={(item) => (
            <List.Item
              key={item.title}
              actions={[
                <span>商品数量：{item.storeNumber}</span>,
                <span>商家：{item.shopcompany}</span>,
                <span>品牌：{item.brandName}</span>,
                <span>商品详情：<Button type="link" target={'_blank'} href={`/toProductinfo/Details/${item.productId}`}>商品详情</Button></span>,
              ]}
              extra={
                <img
                  width={190}
                  alt="logo"
                  src={item.logoImg}
                />
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<a href={item.href}>{item.title}</a>}
                description={item.description}
              />
              {item.content}
            </List.Item>
          )}
        />
      </div>
    )
  }
}

export default ProductinfoTable


